<template>
  <div>
    <van-search
      v-model="value"
      @click="$router.push('/home/searchpopup')"
      disabled
      shape="round"
      placeholder="请输入搜索关键词"
    />
    <div class="left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="v in categoryList"
          :key="v.id"
          :title="v.name"
          @click="onChange(v.id)"
        />
      </van-sidebar>
    </div>
    <div class="right">
      <div class="banner">
        <img :src="currentCategory.img_url" alt="" />
        <h5>{{currentCategory.front_name}}</h5>
      </div>
      <div class="wenzi">
        <span></span>
        <h3>{{currentCategory.name}}</h3>
      </div>
      <van-grid :column-num="3">
        <van-grid-item
          v-for="v in subCategoryList"
          :key="v.id"
          :icon="v.wap_banner_url"
          :text="v.name"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { GetFenLeft, GetFenRight } from "@/request/api";
import { Notify } from "vant";
export default {
  data() {
    return {
      value: "",
      activeKey: "0",
      categoryList: [],
      currentCategory:[],
      subCategoryList:[]
    };
  },
  methods: {
    onChange(index) {
      // Notify({ type: "primary", message: index });
      GetFenRight({id:index}).then((res) => {
        // console.log("右侧");
        // console.log(res);
        this.currentCategory = res.data.currentCategory
        this.subCategoryList = res.data.currentCategory.subCategoryList
      });
    },
  },
  components: {},
  created() {
    GetFenLeft().then((res) => {
      //   console.log(res.data.categoryList);
      this.categoryList = res.data.categoryList;
    });
    // 进入默认是居家的信息
     GetFenRight({id:1005000}).then((res) => {
        this.currentCategory = res.data.currentCategory
         this.subCategoryList = res.data.currentCategory.subCategoryList
      });
  },
};
</script>

<style lang="less" scoped>
.left {
  float: left;
  width: 21%;
  height: 100vh;
  background-color:#F7F8FA;
}
.right {
  float: left;
  width: 79%;
  height: 100%;
  background-color:#fff;
  height:100vh;
  .banner {
    width: 100%;
    height: 1.4rem;
    position: relative;
    img {
      width: 95%;
      height: 100%;
      margin: 0 7px;
      border-radius: 5px;
      box-shadow: 0 0 6px #000;
      filter: brightness(0.5);
    }
    h5 {
      width: 100%;
      color: #fff;
      position: absolute;
      top: 48%;
      left: 0%;
      z-index: 222;
      text-align: center;
    }
  }
  .wenzi {
    width: 100%;
    height: 0.5rem;
    // background-color: pink;
    position: relative;
    span {
      width: 50%;
      height: 2px;
      background-color: #ccc;
      position: absolute;
      margin: auto;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
    h3 {
      width: 30%;
      height: 40px;
      background-color: #fff;
      position: absolute;
      margin: auto;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      line-height: 40px;
      text-align: center;
      color: #000;
    }
  }
}
</style>
